<template>
  <div v-if="visible" class="set-box">
    <h3 class="set-title">图片广告</h3>
    <el-form :model="advertForm" class="label-black" ref="advertForm" label-width="76px">
      <div class="set-part mt20">
        <div class="class_box">
          <el-form-item label="选择模版" prop="listStyle">
            <div class="val-show">{{advertForm.listStyle | filterRadio(listStyleOption)}}</div>
          </el-form-item>
          <div class="brother_row" style="margin-top: -10px;margin-bottom: 20px;">
            <en-radio-tab
              :optionsData="listStyleOption"
              :defaultData="advertForm.listStyle"
              v-model="advertForm.listStyle">
            </en-radio-tab>
          </div>
        </div>
      </div>
      <div class="set-part img-part mb20">
        <h4 class="form-title pt20 mt20 bd-t">添加图片</h4>
        <div class="title-tip">选定布局区域，在下方添加图片，建议添加比例一致的图片</div>
        <div class="decorate-cube">
          <div class="cube-row"
            :style="`width:${advertForm.rowCellWidth}px;height:${advertForm.rowCellHeight}px;`"
            v-for="(item, index) in imgList"
            :key="index"></div>
          <div class="cube-selected"
            v-for="(item, index) in imgList"
            :key="`select${index}`"
            :class="{'active': selctIndex===index}"
            @click="showSelect(index)"
            :style="`left:${advertForm.rowCellWidth*index - index}px;width:${advertForm.rowCellWidth}px;height:${advertForm.rowCellHeight}px;`">
            <img v-if="item && item.url" :src="item.url" class="cube-selected-img" :width="`${advertForm.rowCellWidth}`" :height="`${advertForm.rowCellHeight}`"/>
            <div v-else class="cube-selected-text">宽度{{advertForm.showWidth}}像素</div>
          </div>
        </div>
        <div class="entry-wrap">
          <div class="img-box">
            <img v-if="active.url" :src="active.url" />
            <div class="modify-img" @click="imageUpload">更换图片</div>
          </div>
          <div class="img-content">
            <el-form-item label-width="48px" label="链接">
              <div class="val-show">
                <en-url-picker :defaultData="defaultUrlData" @confirm="handleUrl"/>
              </div>
            </el-form-item>
          </div>
        </div>
      </div>
      <div class="set-part">
        <el-form-item class="pt20 mt20 bd-t" label="图片间隙" prop="imgPadding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="advertForm.imgPadding"></el-slider>
            <el-input class="row-input" v-model.number="advertForm.imgPadding"></el-input>
          </div>
        </el-form-item>
        <el-form-item label="页面间距" prop="pagePadding">
          <div class="flex">
            <el-slider class="row-slider" :min="0" :max="30" v-model.number="advertForm.pagePadding"></el-slider>
            <el-input class="row-input" v-model.number="advertForm.pagePadding"></el-input>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <el-button type="primary" @click="handleConfirm">数据提交</el-button>
    <!-- 图片上传 -->
    <en-image-picker
      :show="dialogImageShow"
      :default-data="defaultImageUrl"
      @close="dialogImageShow = false"
      @confirm="handleImagePickerConfirm"
      :limit="1"
    />
  </div>
</template>

<script>
  import mixin from '../../mixin';
  export default {
    name: 'EnAdvertPicker',
    mixins: [mixin],
    props: {
      show: {
        type: Boolean,
        default: false
      },
      // 默认数据
      defaultData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        visible: this.show,
        advertForm: {
          listStyle: 2,
          showWidth: 160,
          rowCellWidth: 160,
          rowCellHeight: 160,
          imgPadding: 0,
          pagePadding: 0
        },
        imgList: [
          {
            url: null,
            opt: {}
          },
          {
            url: null,
            opt: {}
          }
        ],
        selctIndex: 0,
        active: {
          url: null,
          opt: {}
        },
        defaultUrlData: {
          type: null,
          name: null,
          value: null
        },

        listStyleOption: [{
          value: 2,
          label: '一行两个',
          icon: 'fonticon-advert-two'
        },{
          value: 3,
          label: '一行三个',
          icon: 'fonticon-advert-three'
        },{
          value: 4,
          label: '一行四个',
          icon: 'fonticon-advert-four'
        },{
          value: 5,
          label: '一行五个',
          icon: 'fonticon-advert-five'
        }],
        dialogImageShow: false,
        defaultImageUrl: undefined
      }
    },
    computed: {
      listNum() {
        return this.advertForm.listStyle
      }
    },
    watch: {
      show(newVal) {
        this.visible = newVal
      },
      defaultData(newVal) {
        if (!newVal || !newVal.data) {
          return;
        };
        let _showData = this.MixinClone(newVal);
        let _showStyle = _showData.style;
        this.advertForm.listStyle = _showData.data.length;
        this.$nextTick(() => {
          let _imgList = _showData.data.map(item => {
            let _need = {
              url: item.block_value && item.block_value.img_url ? item.block_value.img_url : ''
            };
            let _opt = item.block_opt || {};
            _need.opt = {
              type: _opt.opt_type,
              name: _opt.opt_name,
              value: _opt.opt_value
            };
            return _need;
          });
          let _firstUrl = _imgList[0].url;
          if (_firstUrl) {
            let _img = new Image;
            let _this = this;
            _img.src = _firstUrl;
            _img.onload = function () {
              _this.advertForm.rowCellHeight = _img.height/_img.width * _this.advertForm.rowCellWidth;
            }
          };
          this.advertForm.imgPadding = _showStyle.imgPadding;
          this.advertForm.pagePadding = _showStyle.pagePadding;
          this.imgList = _imgList;
          // this.advertForm.listStyle = _showStyle.listStyle ? _showStyle.listStyle : _showData.data.length;
          // this.advertForm.showWidth = _showStyle.showWidth;
          // this.advertForm.rowCellWidth = _showStyle.rowCellWidth;
          // this.advertForm.rowCellHeight = _showStyle.rowCellHeight;
          // this.advertForm.imgPadding = _showStyle.imgPadding;
          // this.advertForm.pagePadding = _showStyle.pagePadding;
          // this.imgList = _showData.data;
          this.showSelect(0);
        });
      },
      listNum(_newVal, _oldVal) {
        this.$nextTick(() => {
          this.advertForm.showWidth = parseInt(320/_newVal);
          this.advertForm.rowCellWidth = 320/_newVal;
          this.advertForm.rowCellHeight = this.advertForm.rowCellWidth;
          this.imgList.length = _newVal;
          if (_newVal < this.selctIndex) {
            this.showSelect(0);
          }
        });
      }
    },
    methods: {
      showSelect(_index) {
        let _activeVal = this.imgList[_index];
        _activeVal = _activeVal ? _activeVal : {};
        this.active = _activeVal;
        this.defaultUrlData = _activeVal && _activeVal.opt ? { ..._activeVal.opt } : {};
        this.selctIndex = _index;
      },
      /**
       * 选择图片
       */
      imageUpload() {
        this.dialogImageShow = true;
      },
      /*
        * @date 2020-01-18
        * @author wolfMan
        * @description {图片上传}
      */
      handleImagePickerConfirm(fileList) {
        let _active = this.MixinClone(this.active);
        _active.opt = _active.opt ? _active.opt : {};
        const file = fileList[0]
        _active.url = file.response.url;
        this.$nextTick(() => {
          this.active = _active;
          if (this.selctIndex === 0) {
            let _img = new Image;
            let _this = this;
            _img.src = file.response.url;
            _img.onload = function () {
              _this.advertForm.rowCellHeight = _img.height/_img.width * _this.advertForm.rowCellWidth;
              _this.$set(_this.imgList, _this.selctIndex, _active);
            }
          } else {
            this.$set(this.imgList, this.selctIndex, _active);
          }
        });
      },
      /*
        * @date 2020-02-11
        * @author wolfMan
        * @description {链接地址确认}
      */
      handleUrl(_opt) {
        let _active = this.MixinClone(this.active);
        _active.url = _active.url ? _active.url : null;
        _active.opt = _opt;
        this.$nextTick(() => {
          this.active = _active;
          this.$set(this.imgList, this.selctIndex, _active);
        });
      },
      /*
        * @date 2020-02-12
        * @author wolfMan
        * @description {表单提交}
      */
      handleConfirm() {
        this.$refs['advertForm'].validate((valid) => {
          if (valid) {
            const _formValue = {
              style: this.advertForm,
              data: this.imgList
            };
            this.$emit('confirm', _formValue);
          } else {
            this.$message.error('表单填写有误，请核对！')
            return false
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.set-box {
  .entry-wrap {
    display: flex;
    position: relative;
    padding: 10px;
    background-color: #F2F2F2;
    /deep/ .el-form-item {
      margin-bottom: 0;
      .el-form-item__label {
        padding-right: 10px;
        color: #333;
      }
      .val-show {
        margin: 4px 0;
        line-height: 24px;
        .el-dropdown-link {
          color: #3870EA;
          font-size: 12px;
        }
      }
    }
    .img-box {
      flex-grow: 0;
      position: relative;
      width: 64px;
      height: 64px;
      border: 1px solid #E6E6E6;
      text-align: center;
      overflow: hidden;
      background: #f2f4f6;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
      .modify-img {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        line-height: 18px;
        text-align: center;
        cursor: pointer;
        background: rgba(0, 0, 0, .5);
        color: #fff;
        font-size: 12px;
      }
    }
    .img-content {
      flex: 1;
    }
  }
  /deep/ .decorate-cube {
    position: relative;
    margin: 20px 0;
    &::before,
    &::after {
      display: block;
      content: '';
      height: 0;
      clear: both;
    }
    .cube-row {
      float: left;
      border: 1px solid #E6E6E6;
      cursor: pointer;
      text-align: center;
      & + .cube-row {
        margin-left: -1px;
      }
    }
    .cube-selected {
      position: absolute;
      top: 0;
      cursor: pointer;
      overflow: hidden;
      color: #7d7e80;
      .cube-selected-img {
        max-width: 100%;
      }
      .cube-selected-text {
        width: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        text-align: center;
        font-size: 12px;
      }
      &.active {
        border: 1px solid #155bd4;
        color: #155bd4;
        z-index: 2;
        cursor: auto;
        background: #e0edff;
      }
    }
  }
}
</style>